import React, { Component } from 'react';
import styles from './index.less';
import { Image, Tag, Divider, Popconfirm } from 'antd';
import {
  HeartFilled,
  MessageFilled,
  SmileOutlined,
  PayCircleFilled,
  EyeInvisibleFilled,
} from '@ant-design/icons';
import { getComments, shieldMoment } from '@/api/index';

export default class index extends Component {
  state = {
    commentList: [],
    commentVisible: false,
  };
  showComments() {
    if (!this.state.commentList.length) {
      getComments({ momentID: this.props.pieceData.momentID }).then((res) => {
        if (res.code === 200) {
          this.setState({ commentList: res.data, commentVisible: !this.state.commentVisible });
        }
      });
    } else {
      this.setState({ commentVisible: !this.state.commentVisible });
    }
  }
  handleShield() {
    shieldMoment({ momentID: this.props.pieceData.momentID });
  }
  render() {
    return (
      <div className={styles.piece}>
        <div className={styles.head}>
          <Image src={this.props.pieceData.avator} width={50} height={50}></Image>
          <div className={styles.name}>
            <span className={styles.nickname}>{this.props.pieceData.nickname}</span>
            <Tag color="blue">{this.props.pieceData.Class}</Tag>
          </div>
          <div className={styles.shield}>
            <Popconfirm
              title="你是否确定屏蔽该校友圈，屏蔽后其他人将看不到该校友圈"
              placement="leftTop"
              onConfirm={() => this.handleShield()}
              okText="确定"
              cancelText="取消"
            >
              <EyeInvisibleFilled style={{ fontSize: 20 }} />
            </Popconfirm>
          </div>
        </div>

        <div className={styles.content}>
          {this.props.pieceData.content}
          <div>
            {this.props.pieceData.fileList
              ? this.props.pieceData.fileList.split(';').map((src, index) => {
                  if (src) {
                    return <Image src={src} key={index} width={100} height={100} />;
                  }
                })
              : null}
          </div>
        </div>

        <div className={styles.opera}>
          {this.props.pieceData.price ? (
            <a>
              <PayCircleFilled />
              {this.props.pieceData.price}
            </a>
          ) : null}
          <a>
            <HeartFilled />
            {this.props.pieceData.liked}
          </a>
          <a onClick={() => this.showComments()}>
            <MessageFilled />
            {this.props.pieceData.collected}
          </a>
        </div>
        {this.state.commentVisible
          ? this.state.commentList.map((item, index) => {
              return (
                <p key={index}>
                  <strong>{item.reply_nickname}:</strong>
                  {item.comment}
                </p>
              );
            })
          : null}
        <Divider plain>
          <SmileOutlined />
        </Divider>
      </div>
    );
  }
}
